<template>
	<!-- 商品属性列表 -->
	<div class="mainContent attrListContainer">
		<div class="bread-nav">
			<span class="bread-item">商品管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">商品属性</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">商品列表</span>
		</div>
		<!--  -->
		<div class="attrListContant">
			<div class="search-box">
				<!--  -->
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
				 @onExport="toExport"></advancedSearch>
			</div>
			<!-- table  -->
			<div class="attrListTable">
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">商品列表</div>
						<div class="common-btn-group">
							<!-- <adjustment :headerData="Model.tableHeaderData" @onChangeHeader="getNewHeaderData"></adjustment> -->
						</div>
					</div>

				</el-row>
				<!--  -->
				<el-row class="common-table-con">
					<el-table :data="Model.tableData" max-height="500">
						<el-table-column fixed="left" align="center" label="商品编码" width="">
							<template slot-scope="scope">
								<el-button type="text" @click="showMore(scope.row)"><a class="detail-link">{{scope.row.commodityCode}}</a></el-button>
							</template>
						</el-table-column>
						<el-table-column v-for="(item,index) in Model.tableHeaderData" align="center" v-if="item.prop == 'tag'" :prop="item.prop"
						 :key="item.prop" :label="item.label" width="100">
							<template slot-scope="scope">
								<el-button type="text" @click="showMore(scope.row)"><a class="detail-link detail-tag">{{scope.row.tag}}</a></el-button>
							</template>
						</el-table-column>
						<el-table-column v-else align="center" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width">

						</el-table-column>
						<el-table-column align="center" fixed="right" label="操作" width="120">
							<template slot-scope="scope">
								<div class="operate-btn" @click="handleClickApproval(scope.row)">添加标签</div>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页 -->
					<!-- 产品需求大类不需要分页，中类和小类则需要 -->
					<el-row class="pagination-cont">
						<el-pagination :pager-count="5" @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="Model.paginationObject.currentPage"
						 :page-sizes="[10, 20, 30, 40]" :page-size="Model.paginationObject.pageSize" layout="sizes, prev, pager, next, jumper, slot"
						 :total="Model.paginationObject.total">
							<div class="pagination-slot">
								显示
								<p class="slot-i">{{Model.paginationObject.num1}}</p>
								到
								<p class="slot-i">{{Model.paginationObject.num2}}</p>
								，共
								<p class="slot-i">{{Model.paginationObject.total}}</p>
								记录
							</div>
						</el-pagination>
					</el-row>
				</el-row>
			</div>
			<!-- table end -->
			<!-- 弹窗1 -->
			<el-dialog :visible.sync="Model.showDetial" top="100px">
				<!--  -->
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">详情</div>
				</div>
				<!--  -->
				<el-row class="common-table-con print-container" id="print-cont">
					<div class="dialogItemTitle">
						<img src="../../../../assets/img/flower_brown.png" alt="">
						<p class="text">参数列表</p>
					</div>
					<el-table :data="Model.tableData" max-height="500">
						<el-table-column align="center" label="商品编码" width="">
							<template slot-scope="scope">
								<el-button type="text" @click="showMore(scope.row)">{{scope.row.code}}</el-button>
							</template>
						</el-table-column>
						<el-table-column v-for="(item,index) in Model.tableHeaderData" align="center" :key="item.prop" :prop="item.prop"
						 :label="item.label" :width="item.width">
						</el-table-column>
					</el-table>
				</el-row>
			</el-dialog>
			<!-- 弹窗end -->

		</div>
	</div>
</template>

<script>
	import advancedSearch from "../../../../components/common/filter/advancedSearch"
	// import adjustment from "../../../../components/common/adjustment/index"	//
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: 'attrList',
		mixins: [Model, Controller],
		components: {
			advancedSearch,
		},
		props: [
			''
		],
		created() {
			this.init();
		},
		mounted() {

		},
	}
</script>

<style scoped lang="less">
	@import "./index.less";
</style>
